<!--
 * @Description: 下拉多选框 公共组件
 * @Author: 0001101185/DingYi
 * @Date: 2024-01-17 14:49:59
 * @LastEditTime: 2024-01-18 15:41:21
 * @LastEditors: 0001101185/DingYi
-->
<template>
  <div>
    <el-select
      v-model="selectList"
      multiple
      :collapse-tags="collapseTags"
      clearable
      @change="handleChange"
      style="width: 100%"
    >
      <div>
        <div style="padding: 9px 20px">
          <!-- 全选 -->
          <el-radio
            v-show="layout.includes('all')"
            v-model="radioCheked"
            label="1"
          >{{$t('common.allSelected')}}</el-radio>
          <!-- 反选 -->
          <el-radio
            v-show="layout.includes('reverse')"
            v-model="radioCheked"
            label="2"
          >{{$t('common.reverseSelected')}}</el-radio>
          <!-- 重置 -->
          <el-radio
            v-show="layout.includes('reset')"
            v-model="radioCheked"
            label="3"
          >{{$t('common.resetSelected')}}</el-radio>
        </div>
      </div>
      <el-option v-for="item in dataList" :value="item.value" :key="item.value" :label="item.label"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'MuiltSelect',
  props: {
    collapseTags: {
      type: Boolean,
      default: true
    },
    dataList: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    layout: {
      type: String,
      default: () => {
        return 'all, reverse, reset';
      }
    }
  },
  data () {
    return {
      // 回显值
      selectList: [],
      radioCheked: '',
      // 真实值
      result: []
    };
  },
  mounted () {
    this.$nextTick(() => { });
  },
  watch: {
    'radioCheked' (val) {
      this.result = [];
      if (val === '1') {
        // 全选
        for (let i = 0; i < this.dataList.length; i++) {
          if (this.selectList.indexOf(this.dataList[i].value) === -1) {
            this.selectList.push(this.dataList[i].value);
          }
        }
      } else if (val === '2') {
        // 反选
        for (let i = 0; i < this.dataList.length; i++) {
          // 存在则删除
          if (this.selectList.indexOf(this.dataList[i].value) !== -1) {
            this.selectList.splice(this.selectList.indexOf(this.dataList[i].value), 1);
          } else {
            // 不存在的添加
            this.selectList.push(this.dataList[i].value);
          }
        }
        // 重置按钮
        this.radioCheked = '';
      } else if (val === '3') {
        // 重置按钮
        this.radioCheked = '';
        // 重置
        this.selectList = [];
      }
      for (let i = 0; i < this.selectList.length; i++) {
        this.result.push(this.selectList[i]);
      }
      this.$emit('update:value', this.result);
    },
    value (val) {
      let selectList = [];
      if (val.length) {
        for (let i = 0; i < val.length; i++) {
          selectList.push(val[i]);
        }
        this.selectList = selectList;
      }
    }
  },
  methods: {
    handleChange (val) {
      this.$nextTick(() => {
        const result = [];
        if (val.length !== this.dataList.length) {
          this.radioCheked = null;
        } else {
          this.radioCheked = '1';
        }
        if (val.length) {
          for (let i = 0; i < val.length; i++) {
            result.push(val[i]);
          }
        }
        this.result = result;
        this.$emit('update:value', this.result);
      });
    },
  }
};
</script>

<style lang="scss" scoped>
</style>